<template>
	<li :class="{[prefixCls+'-menu-item']:true,[prefixCls+'-menu-item-active']:active==name}" @click="onClick(name,to,target)">
		<slot></slot>
	</li>
</template>

<script>
import { prefixCls } from '../prefix'

export default {
	name: `${prefixCls}MenuItem`,
	props:{
		name:{
			type:[String, Number]
		},
		to:{
			type:String
		},
		target:{
			type:String
		}
	},
	data(){
		return {
			prefixCls: prefixCls,
			active:'',//当前菜单位置
		}
	},
	mounted(){
		this.active = this.$parent.active;
	},
	methods:{
		//切换选中项
		onClick(name,to,target){
			name = name.toString()
        	//把name值分割，二级菜单会有2个，三级菜单会有3个，直接通过length判断是几级菜单
        	let arr = name.split('-');

			/**
			 * position:  menuItem所在结构位置，属于哪个结构中
			 * name: menuItem 的 name值
			 * id: 包含的最上层结构的name值
			 */
			
			// 点击菜单属于结构中哪个位置
			const position = this.$parent.$options.name;

			// 一级导航，触发父组件menu中的事件
			if(position == `${prefixCls}Menu`){
				const id = this.name;
				// this.$parent.changeActive(position,name,id)
				// this.$parent.menuSelect(name,to,target)
				this.changeActive(position,name,id)
				this.menuSelect(name,to,target)
			}

			/**
			 * 点击menuItem 判断是否在submenu结构中
			 * 二级和三级导航，都包含在submenu中
			 */
			const parentSubMenu = this.$parent.$parent;
			if(parentSubMenu.$options.name == `${prefixCls}Submenu`){
				const id = this.$parent.$parent.name;
				//触发父组件-submenu中的事件
				parentSubMenu.getMenuItemAction(name);
				this.changeActive(position,name,id)
				this.menuSelect(name,to,target)
			}
		}
	},
	inject:['changeActive','menuSelect']
}
</script>